<!--
 * @Author: ShengXD <1519256482@qq.com>
 * @Date: 2024-11-06 11:49:36
 * @LastEditors: ShengXD <1519256482@qq.com>
 * @LastEditTime: 2024-11-07 09:07:27
 * @FilePath: /vben-quick-setup/apps/web-antd/src/views/system/role/index.vue
 * @Description: 
-->
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Page } from '@vben/common-ui';
import { Button, Card, Table, Space, message } from 'ant-design-vue';
import { getRoleTableData } from '#/api/core/explanation';

defineOptions({ name: 'Roles' });

const dataSource = ref([]);
const tableLoading = ref(false);
const fetchData = async () => {
  try {
    tableLoading.value = true;
    const response = await getRoleTableData();
    dataSource.value = response.list;
  } catch (error) {
    message.error('数据获取失败');
    console.error(error);
  } finally {
    tableLoading.value = false;
  }
};

onMounted(() => {
  fetchData();
});

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '角色',
    dataIndex: 'role',
    key: 'role',
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: '员工数量',
    dataIndex: 'num',
    key: 'num',
  },
  {
    dataIndex: 'action',
    key: 'action',
  },
];
</script>

<template>
  <Page description="角色管理的描述内容。。。。。。。。。。" title="角色管理">
    <Card>
      <Table size="small" :dataSource="dataSource" :columns="columns" >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <Space>
              <Button :type="`link`">编辑</Button>
              <Button :type="`link`">删除</Button>
            </Space>
          </template>
        </template>
      </Table>
    </Card>
  </Page>
</template>
